import React, { Component } from 'react'
import { StatusBar, ActivityIndicator,BackHandler,View,Image,ScrollView, Text} from 'react-native'
import { Rating } from 'react-native-elements'
import Icon from 'react-native-vector-icons/FontAwesome'
import ScrollableTabView from 'react-native-scrollable-tab-view'
import { connect } from 'react-redux'

import CommodityList from '../Components/CommodityList'
import Comment from './Comment'

import ServerDetailActiosn from '../Redux/ServerDetailRedux'
import ServerCommodityActions from '../Redux/ServerCommodityRedux'

// Styles
import styles from './Styles/ServerDetailScreenStyle'

class ServerDetailScreen extends Component {
  static navigationOptions = {
    title: '师傅详情'
  }
  constructor(props) {
    super(props)
    const { state } = this.props.navigation
    this.props.getServer(state.params.id)
    this.props.getCommodity(state.params.id,this.props.city.adcode)
  }
  componentDidMount() {
    BackHandler.addEventListener("hardwareBackPress", this.onBackPress);
  }
  componentWillUnmount() {
    BackHandler.removeEventListener("hardwareBackPress", this.onBackPress);
  }
  onBackPress = () => {
    this.props.navigation.goBack()
    return true
  }

  // render photos of server
  renderAvatar(server) {
    return (
      <View style={styles.imageContainer}>
        {server.selfies &&
          server.selfies.map((item,i)=>
          <View style={styles.image} key={i}>
            <Image
              source={{uri:item}}
              style={{width:'100%',height:'100%'}} />
          </View>
        )}
      </View>
    )
  }

  // render name, star, info, etc
  renderInfo(server) {
    return (
      <View style={styles.main}>
        <View style={styles.header}>
          <View style={styles.headerLeft}>
            <Text style={styles.name}>{server.nickname}</Text>
            <Icon
              name={server.sex == 1 ? 'mars' : 'venus'}
              size={16}
              color='orange'
              style={{marginLeft:5}}
            />
            <Rating
              type='star'
              readonly
              startingValue={Number(server.star)}
              imageSize={16}
              style={{marginLeft:10}}
            />
          </View>
          <Text>工号: {server.job_no}</Text>
        </View>
        <Text>{server.count ? server.count : 0}人选择了TA</Text>
        <Text style={styles.desc}>{server.desc}</Text>
      </View>
    )
  }

  render () {
    if (this.props.server.fetching) {
      return <ActivityIndicator style={{marginTop:20}} />
    }
    if (!this.props.server.payload) {
      return null // if network error, or server error
    }
    const server = this.props.server.payload
    return (
      <ScrollView style={styles.container}>
        <StatusBar translucent={false} barStyle='dark-content' backgroundColor='white' />
        {this.renderAvatar(server)}
        {this.renderInfo(server)}
        <ScrollableTabView
          tabBarActiveTextColor='#27AE60'
          tabBarUnderlineStyle={{
            backgroundColor:'#27AE60',height:2}}
          style={{height:600}}
          tabBarBackgroundColor='white'>
          <View tabLabel='项目'>
            {this.props.commodity.fetching ? (
              <ActivityIndicator style={{marginTop:20}} />
            ) : (
              <CommodityList
                navigation={this.props.navigation}
                data={this.props.commodity.payload} />
            )}
          </View>
          <View tabLabel='评价'>
            <Comment style={{flex:1}} id={server.id} />
          </View>
        </ScrollableTabView>
      </ScrollView>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    city: state.city.payload,
    server: state.serverDetail,
    commodity: state.serverCommodity,
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    getServer: (id) => dispatch(ServerDetailActiosn.serverDetailRequest(id)),
    getCommodity: (id,adcode) => dispatch(ServerCommodityActions.serverCommodityRequest(id,adcode))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(ServerDetailScreen)
